import BaseCreatejs from '@/components/games/createjs/js/BaseCreatejs.js'
import { MOBILE_WID_HEI } from '@/common/const-dif'

export default class Football extends BaseCreatejs {
  constructor() {
    super();

    this.footballFrame = null;
    this.football = null;
    this.footballPoint = null;
    this.shooter = null;
    this.downAngle = 0;
    this.endPoint = null;
  }

  initView() {
		window.createjs.Ticker.timingMode = createjs.Ticker.RAF;

    this.stage.addChild(this.stagePage);
    
    this.footballFrame = this.stagePage["footballFrame"];
    this.football = this.stagePage["football"];
    this.footballPoint = { x: this.football.x, y: this.football.y };
    this.shooter = this.stagePage["shooter"];

    this.football.visible = false;

    this.shootPoint = new window.createjs.Point(MOBILE_WID_HEI.clientWidth/2, MOBILE_WID_HEI.clientHeight - 100);

    let stage = this.stage;
    this.onStageMouseDown = this.onStageMouseDown.bind(this);
    this.onStageMouseUp = this.onStageMouseUp.bind(this);
    this.onStageMouseMove = this.onStageMouseMove.bind(this);
    stage.on("stagemousedown", this.onStageMouseDown);              
    stage.on("stagemouseup", this.onStageMouseUp);
    stage.on("stagemousemove", this.onStageMouseMove);

    // window.createjs.Ticker.addEventListener("tick", () => {
    //   this.shooter.rotation = this.rotation;
    //   this.rotation++;
    //   console.log("rotation: " + this.rotation)
    // });                        
  }

  onStageMouseDown(evt) {
    let stage = this.stage;
    let anchorPoint = { x: this.shooter.x, y: this.shooter.y };
    let keyPoint = stage.globalToLocal(evt.stageX, evt.stageY);
    this.downAngle = Math.atan((keyPoint.y - anchorPoint.y) / (keyPoint.x - anchorPoint.x)) + this.getQuadrant(keyPoint.x, anchorPoint.x);
  }

  onStageMouseUp(evt) {
    this.football.visible = true;
    //发射足球，根据角度计算，tween动画，完成后隐藏足球 射击抢重新回到初始位置
    let endPoint = this.endPoint = this.calculateRotateXY({x: this.footballFrame.x, y: this.footballFrame.y}, {x: this.shooter.x, y: this.shooter.y}, this.shooter.rotation);
    window.createjs.Tween.get(this.football, {loop: 0})
			.to({ x: endPoint.x, y: endPoint.y }, 500, createjs.Ease.getPowOut(1.5)).wait(1000).call(this.tweenComplete.bind(this));
  }

  tweenComplete() {
    this.shooter.rotation = 0;
    this.football.visible = false;
    this.football.x = this.footballPoint.x;
    this.football.y = this.footballPoint.y;
    
    let endPoint = this.endPoint;
    //终点在 足球框内 就中了 得分
    let rect = { width: 420, height: 240 };//this.footballFrame.getBounds();
    let ballRect = this.football.getBounds();
    if(endPoint.x - ballRect.width/2 > this.footballFrame.x - rect.width/2 && endPoint.x + ballRect.width/2 < this.footballFrame.x + rect.width/2 
        && endPoint.y - ballRect.height/2 > this.footballFrame.y - rect.height/2 && endPoint.y + ballRect.height/2 < this.footballFrame.y + rect.height/2) {
      this.showToast("成功得分了！！！");
    } else {
      this.showToast("失败了！！！");
    }
  }

  onStageMouseMove(evt) {
    let stage = this.stage;
    let anchorPoint = { x: this.shooter.x, y: this.shooter.y };
    let keyPoint = stage.globalToLocal(evt.stageX, evt.stageY);
    let angle = Math.atan((keyPoint.y - anchorPoint.y) / (keyPoint.x - anchorPoint.x));
    this.shooter.rotation = (this.getQuadrant(keyPoint.x, anchorPoint.x) + angle - this.downAngle) * 180 / Math.PI;
  }

  getQuadrant(keyX, anchorX) {
    return keyX - anchorX >= 0 ? 0 : Math.PI;
  }

  
  calculateRotateXY(point, o, degree) {
    let radian = degree * Math.PI / 180;
    let x = (point.x-o.x) * Math.cos(radian) + (point.y-o.y) * Math.sin(radian) + o.x;
    let y = (point.y-o.y) * Math.cos(radian) + (point.x-o.x) * Math.sin(radian) + o.y;
    let relativeOriginPoint = {
        x: Math.round(x * 100) / 100,
        y: Math.round(y * 100) / 100
    };
    return relativeOriginPoint;
  }

  destroy() {
    this.footballFrame = null;
    this.football = null;
    this.footballPoint = null;
    this.shooter = null;
    this.downAngle = 0;
    this.endPoint = null;

    let stage = null;
    stage.off("stagemousedown", this.onStageMouseDown.bind(this))                
    stage.off("stagemouseup", this.onStageMouseUp.bind(this))
    stage.off("stagemousemove", this.onStageMouseMove.bind(this)) 
  }
}
